.home {
  width: 100%;
  min-height: 100vh;
  background: url("../../../images/bg2.jpg") no-repeat center center;
  background-size: cover;
  user-select: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  .nav-bar {
    align-self: flex-end;
  }
  .welcome {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 6px rgb(173, 168, 168);
    padding: 2vh 0;
    transition: 0.3s;
    text-align: center;
    &:hover {
      margin-top: -3px;
      box-shadow: 0 0 20px rgb(160, 156, 156);
    }
    .title {
      text-align: center;
      font-size: 3.7rem;
      color: rgb(240, 240, 240);
      letter-spacing: 1rem;
      text-shadow: 5px 5px 10px rgb(53, 52, 52);
    }
    .content {
      text-align: left;
      color: #f5f5f5;
      margin-top: 5rem;
      padding: 0 20px;
      margin-bottom: 30px;
      .ant-form-item-label > label {
        color: #f5f5f5;
      }
      .content-title {
        text-align: center;
        font-size: 23px;
        font-weight: bold;
        line-height: 1.5;
      }
      .content-list {
        list-style: circle;
        font-size: 18px;
        padding-left: 50px;
        line-height: 2em;
        li {
          &:hover {
            color: #fff;
            list-style-type: disc;
            text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
          }
          &:last-child {
            color: #f5f5f5;
            list-style-type: circle;
            text-shadow: none;
          }
        }
      }
    }
    .btn-enter {
      color: #fff;
      animation: enter-btn-flash 1.5s infinite alternate;
      height: 2rem;
      font-size: 1.7rem;
      letter-spacing: 0.4em;
      text-align: center;
      border: 1px solid #fff;
      padding: 3px 10px;
      margin-top: 20px;
      &:hover {
        animation: none;
        color: #fff;
        opacity: 1;
      }
    }
  }

  .login,
  .register {
    .login-form {
      max-width: 360px;
      margin: 0 auto;
    }
    .login-form-forgot {
      float: right;
    }
    .login-form-button {
      width: 100%;
    }
  }

  .register {
    .login-form {
      max-width: 360px;
      margin: 0 auto;
    }
    .content {
      margin-top: 3rem;
    }
    .ant-form-item {
      .ant-form-item-label {
        line-height: 1;
      }
    }
  }
}

@keyframes enter-btn-flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.6;
  }
}
